<template>
    <div class="message">
        <!--yd-list theme="4" v-if="salary && salary.length">
            <animate-list enter="flipInX">
            <yd-list-item v-for="item in salary" :key="item.salary_date" @click.native="showDetail(item)">
                <img slot="img" :src="salaryImage(item)"/>
                <span slot="title">
                    <span>
                        {{ item.salary_date }}
                    </span>
                </span>
                <p slot="other">{{ item.salary_content }}</p>
                <yd-list-other slot="other">
                    <div>
                        <span>¥  {{ item.salary_sum }} </span>
                    </div>
                </yd-list-other>
            </yd-list-item>
            </animate-list>
        </yd-list-->

        <ul v-if="salary && salary.length" v-scroll-bottom="salary">
        <transition-group name="list" tag="p">
            <li class="list-item" v-for="item in salary" :key="item.salary_date">
                <p class="time">
                    <span>{{ item.salary_date.substring(0,10) }}</span>
                </p>
                <div class="card">
                    <h2>{{ item.salary_content }}</h2>
                    <p class="tag">{{ item.salary_date.substring(5,10)}}</p>
                    <img slot="img" :src="salaryImage(item)"/>
                    <yd-cell-group>
                        <yd-cell-item arrow @click.native="showDetail(item)">
                            <span slot="left">
                                <yd-icon name="shopcart" size=".28rem" color="#00ff00"></yd-icon>
                                <span class="itemvalue">¥  {{ item.salary_sum || 0 }} </span>
                            </span>
                            <span slot="right">查看明细</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
            </li>
        </transition-group>
        </ul>

        <div v-else>
            <p class="prompt">
                <span>没有查询到记录</span>
            </p>
        </div>
        <yd-popup v-model="showSalary" position="bottom" height="50%">
            <div class="salaryBox">
                <div class="imageBox">
                    <img :src="salaryImage(salaryInfo)"/>
                </div>
                <div class="salaryDesc">
                    <span class="itemname">¥ {{ salaryInfo.salary_sum }}</span><br/>
                    <span class="itemdesc">{{ salaryInfo.salary_date }}</span>
                </div>
            </div>
            <yd-cell-group class="listBox">
                <yd-cell-item v-for="item in salaryInfo.items" :key="item.name">
                    <yd-icon slot="icon" name="order" :color="iconColor(item)"></yd-icon>
                    <span slot="left">{{ item.name }}</span>
                    <span slot="right" class="itemvalue">{{ item.sum }} ¥</span>
                </yd-cell-item>
            </yd-cell-group>
        </yd-popup>
    </div>
</template>

<script>
module.exports = {
    created () {
        this.$store.dispatch('getSalary', (data) => {
            const id = '' + this.$route.params.id
            if(id) {
                const item = _.filter(data, {salary_id: id})[0]
                if(item) {
                    this.salaryInfo = item
                    this.showSalary = true
                }
            }
            this.$store.commit('webar', {
                show: 'selmonth',
                handleSearch: this.handleSearch
            })
        })
    },
    data () {
        return {
            showSalary: false,
            salaryInfo: {},
            startDate: undefined,
            endDate: undefined
        }
    },
    computed: {
        salary () {
            const list = this.$store.getters.salaryList.list
            if(this.startDate && this.endDate) {
                return _.filter(list, (item) => {
                    if(moment(item.salary_date).isBetween(this.startDate, this.endDate, 'month'))
                        return item
                })
            } else {
                return list
            }
        }
    },
    methods: {
        iconColor (item) {
            return item.sum > 0 ? "#4DCD32" : "#C51418"
        },
        salaryImage (item) {
            if(item.image_list && item.image_list[0]) {
                return item.image_list[0].url
            } else {
                return 'assets/img/default/salary.jpg'
            }
        },
        showDetail (item) {
            this.showSalary = true
            this.salaryInfo = item
        },
        handleSearch (startDate, endDate) {
            this.startDate = startDate
            this.endDate = endDate
        }
    },
    directives: {
        'scroll-bottom' (el) {
            Vue.nextTick(() => {
                document.querySelector('#scrollView').scrollTop = el.clientHeight;
            });
        }
    }
}
</script>

<style scoped>
.salaryBox {
    height: 1.4rem;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
}
.listBox {
    margin-left: 1.4rem;
    margin-top: 1.4rem;
}
.imageBox {
    float: left;
    display: block;
    margin: .2rem;
    width: 1rem;
    height: 1rem;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
    border-radius: .1rem;
}
.imageBox img {
    height: 1rem;
    border-radius: .1rem;
}
.salaryDesc {
    padding-top: .3rem;
}
.itemname {
    padding-left: .4rem;
    font-weight: bold;
    font-size: .38rem;
    color: #000;
}
.itemdesc {
    padding-left: .4rem;
    font-size: .28rem;
    color: #cfcfcf;
}
.itemvalue {
    padding-left: .2rem;
    font-size: .38rem;
    color: #000;
    -webkit-transform:scale(1,1.6);
    -moz-transform:scale(1,1.6);
}
.yd-list-item {
    height: 1.8rem;
}
    .prompt {
        margin: .1rem 0;
        text-align: center;
    }
    .prompt > span {
            display: inline-block;
            padding: 0 .18rem;
            font-size: .12rem;
            color: #fff;
            border-radius: .1rem;
            background-color: #dcdcdc;
        }

.message {
    padding: 0rem .15rem;
    overflow-y: scroll;
}
    li {
        margin-bottom: .15rem;
    }
    .time {
        margin: .1rem 0;
        text-align: center;
    }
    .time > span {
            display: inline-block;
            padding: 0 .18rem;
            font-size: .12rem;
            color: #fff;
            border-radius: .1rem;
            background-color: #dcdcdc;
        }
.card {
    background-color: #fff;
    margin: .2rem;
    padding: .3rem;
}
.card > img {
    width: 100%;
    max-height: 3rem;
    margin-top: .1rem;
    margin-bottom: .1rem;
    object-fit: cover;
}
.card > h2 {
    font-size: .38rem;
    font-weight: normal;
}
.card > p {
    font-size: .28rem;
}
.card > .tag {
    font-size: .28rem;
    float: right;
    color: #666;
}
.list-item {
    display: block;
    min-height: 1rem;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
</style>